<template>
  <div class="main-page">
    <BaseBox class="box">
      <data-item-panel @addSchema="addSchema" />
    </BaseBox>
    <BaseBox class="box">
      <display-panel
        :formConfig="formConfig"
        :formData="formData"
        :IDMap="IDMap"
        :currentItem="currentItem"
        @setCurrentItem="setCurrentItem"
        @deleteCurrentItem="deleteCurrentItem"
      />
    </BaseBox>
    <BaseBox class="box" full>
      <config-panel
        :formConfig="formConfig"
        :currentItem="currentItem"
        @changeFormConfig="changeFormConfig"
        @changeSchema="changeSchema"
      />
    </BaseBox>
  </div>
</template>

<script setup lang="ts">
import dataItemPanel from "./components/business/data-item-panel.vue";
import displayPanel from "./components/business/display-panel.vue";
import configPanel from "./components/business/config-panel.vue";
import BaseBox from "./components/base/base-box.vue";
import { computed, ref } from "vue";
import { deepClone, formConfig as formConfigData } from "./uitls";
import { DraggableTreeNode, FormConfig, FormDataType, IDMapType } from "./type";
const formConfig = ref<FormConfig>(formConfigData);
const formData = ref<FormDataType>({});
const IDMap = ref<IDMapType>({});
const currentItem = computed(() => {
  return formConfig.value.currentItem;
});
function addSchema(schema: DraggableTreeNode) {
  formConfig.value.schemas.push(deepClone(schema));
}
function setCurrentItem(schema: DraggableTreeNode) {
  console.log(schema, formConfig.value, "到达main-page");
  formConfig.value.currentItem = schema;
}
function deleteCurrentItem(schema: DraggableTreeNode) {
  if (currentItem.value && schema.id === currentItem.value.id) {
    // 删除的是当前组件
    const ind = formConfig.value.schemas.findIndex(
      (item) => item.id === schema.id
    );
    formConfig.value.schemas.splice(ind, 1);
    if (ind > 0) {
      formConfig.value.currentItem = formConfig.value.schemas[ind - 1];
    } else {
      formConfig.value.currentItem = null;
    }
  } else {
    // 删除的不是当前组件
    const ind = formConfig.value.schemas.findIndex(
      (item) => item.id === schema.id
    );
    formConfig.value.schemas.splice(ind, 1);
  }
}
// 表单值更改
function changeFormConfig(e: FormConfig) {
  formConfig.value = Object.assign(formConfig.value, e);
}
// 具体的组件配置更改
function changeSchema(schema: DraggableTreeNode) {
  console.log(schema, "schema");
  if (!currentItem.value?.component) {
    // 模块
    const schemaItem = formConfig.value.schemas.find(
      (item) => item.id === currentItem.value?.id
    );
    if (schemaItem) schemaItem.label = schema.label;
  } else {
    // 组件
    const schemaItem = formConfig.value.schemas.find(
      (item) => item.id === currentItem.value?.id
    );
    if (!schemaItem) return;
    schemaItem.component = Object.assign(
      currentItem.value.component,
      schema.component
    );
    // eslint-disable-next-line no-prototype-builtins
    if (schema.hasOwnProperty("label")) {
      schemaItem.label = schema.label;
    }
  }
}
</script>

<style lang="scss" scoped>
.main-page {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px auto 320px;
  grid-template-rows: 100%;
  gap: 10px;
  overflow: auto;
  padding: 20px;

  .box {
    height: 100%;
    overflow: auto;

    padding: 20px 10px;
  }
}
</style>
